<template>
  <div class="homePage">
    <el-scrollbar class="scrollbar-con">
      <div class="total_of">
        <el-card class="datas-item">
          <div class="leftHead">
            <img src="../images/one1.png" alt="" />
          </div>
          <div class="rightInfo">
            <div class="r-title">
              累计访问人数
            </div>
            <div class="r-num">{{ SystemCount.UV数 }}</div>
          </div>
        </el-card>
        <el-card class="datas-item">
          <div class="leftHead">
            <img src="../images/one2.png" alt="" />
          </div>
          <div class="rightInfo">
            <div class="r-title">
              累计访问人次
            </div>
            <div class="r-num">{{ SystemCount.PV数 }}</div>
          </div>
        </el-card>
        <el-card class="datas-item">
          <div class="leftHead">
            <img src="../images/one3.png" alt="" />
          </div>
          <div class="rightInfo">
            <div class="r-title">
              今日访问人数
            </div>
            <div class="r-num">{{ SystemCount.今日UV数 }}</div>
          </div>
        </el-card>
        <el-card class="datas-item">
          <div class="leftHead">
            <img src="../images/one4.png" alt="" />
          </div>
          <div class="rightInfo">
            <div class="r-title">
              今日访问人次
            </div>
            <div class="r-num">{{ SystemCount.今日PV数 }}</div>
          </div>
        </el-card>
      </div>
      <div class="user_statistics">
        <div class="user_top">
          <div class="icon"></div>
          <div class="text">用户统计</div>
        </div>
        <div class="user_info">
          <el-card class="datas-item">
            <div class="leftHead">
              <img src="../images/two1.png" alt="" />
            </div>
            <div class="rightInfo">
              <div class="r-title">
                累计访问人数
              </div>
              <div class="r-num">{{ UserInfo.registeredUsersCount }}</div>
            </div>
          </el-card>
          <el-card class="datas-item">
            <div class="leftHead">
              <img src="../images/two2.png" alt="" />
            </div>
            <div class="rightInfo">
              <div class="r-title">
                注册用户人数
              </div>
              <div class="r-num">{{ UserInfo.registeredUsersCount }}</div>
            </div>
          </el-card>

          <el-card class="datas-item">
            <div class="leftHead">
              <img src="../images/two3.png" alt="" />
            </div>
            <div class="rightInfo">
              <div class="r-title">
                待认证用户数
              </div>
              <div class="r-num">{{ UserInfo.authMemberCount }}</div>
            </div>
          </el-card>

          <el-card class="datas-item">
            <div class="leftHead">
              <img src="../images/two4.png" alt="" />
            </div>
            <div class="rightInfo">
              <div class="r-title">
                男用户数
              </div>
              <div class="r-num">{{ UserInfo.manUsersCount }}</div>
            </div>
          </el-card>

          <el-card class="datas-item">
            <div class="leftHead">
              <img src="../images/two5.png" alt="" />
            </div>
            <div class="rightInfo">
              <div class="r-title">
                女用户数
              </div>
              <div class="r-num">{{ UserInfo.womanUsersCount }}</div>
            </div>
          </el-card>
        </div>
        <div class="user_echarts">
          <div id="user_echarts_left" class="user_echarts_left"></div>
          <div id="user_echarts_right" class="user_echarts_right"></div>
        </div>
      </div>
      <div class="resource_statistics">
        <div class="resource_top">
          <div class="icon"></div>
          <div class="text">资源统计</div>
        </div>
        <div class="resource_one">
          <div class="resource_one_title">视频</div>
          <div class="resource_one_info">
            <el-card class="datas-item">
              <div class="leftHead">
                <img src="../images/three11.png" alt="" />
              </div>
              <div class="rightInfo">
                <div class="r-title">
                  视频课程总数
                </div>
                <div class="r-num">{{ VideoCount.courseInfoCount }}</div>
              </div>
            </el-card>
            <el-card class="datas-item">
              <div class="leftHead">
                <img src="../images/three12.png" alt="" />
              </div>
              <div class="rightInfo">
                <div class="r-title">
                  视频课件总数
                </div>
                <div class="r-num">{{ VideoCount.coursewareCount }}</div>
              </div>
            </el-card>
            <el-card class="datas-item">
              <div class="leftHead">
                <img src="../images/three13.png" alt="" />
              </div>
              <div class="rightInfo">
                <div class="r-title">
                  累计观看人数
                </div>
                <div class="r-num">{{ VideoCount.peopleViewCount }}</div>
              </div>
            </el-card>
            <el-card class="datas-item">
              <div class="leftHead">
                <img src="../images/three14.png" alt="" />
              </div>
              <div class="rightInfo">
                <div class="r-title">
                  累计观看人次
                </div>
                <div class="r-num">{{ VideoCount.personTimeViewCount }}</div>
              </div>
            </el-card>
            <el-card class="datas-item">
              <div class="leftHead">
                <img src="../images/three15.png" alt="" />
              </div>
              <div class="rightInfo">
                <div class="r-title">
                  累计观看时长（小时）
                </div>
                <div class="r-num">{{ VideoCount.cumulativeTime }}</div>
              </div>
            </el-card>
          </div>
        </div>
        <div style="height:26px"></div>
        <div class="resource_one">
          <div class="resource_one_title">音频</div>
          <div class="resource_one_info">
            <el-card class="datas-item">
              <div class="leftHead">
                <img src="../images/three21.png" alt="" />
              </div>
              <div class="rightInfo">
                <div class="r-title">
                  音频课程总数
                </div>
                <div class="r-num">{{ AudioCount.courseInfoCount }}</div>
              </div>
            </el-card>
            <el-card class="datas-item">
              <div class="leftHead">
                <img src="../images/three22.png" alt="" />
              </div>
              <div class="rightInfo">
                <div class="r-title">
                  音频课件总数
                </div>
                <div class="r-num">{{ AudioCount.coursewareCount }}</div>
              </div>
            </el-card>
            <el-card class="datas-item">
              <div class="leftHead">
                <img src="../images/three23.png" alt="" />
              </div>
              <div class="rightInfo">
                <div class="r-title">
                  累计收听人数
                </div>
                <div class="r-num">{{ AudioCount.peopleViewCount }}</div>
              </div>
            </el-card>
            <el-card class="datas-item">
              <div class="leftHead">
                <img src="../images/three24.png" alt="" />
              </div>
              <div class="rightInfo">
                <div class="r-title">
                  累计收听人次
                </div>
                <div class="r-num">{{ AudioCount.personTimeViewCount }}</div>
              </div>
            </el-card>
            <el-card class="datas-item">
              <div class="leftHead">
                <img src="../images/three25.png" alt="" />
              </div>
              <div class="rightInfo">
                <div class="r-title">
                  累计收听时长（小时）
                </div>
                <div class="r-num">{{ AudioCount.cumulativeTime }}</div>
              </div>
            </el-card>
          </div>
        </div>
        <div style="height:26px"></div>
        <div class="resource_one">
          <div class="resource_one_title">活动</div>
          <div class="resource_one_info">
            <el-card class="datas-item">
              <div class="leftHead">
                <img src="../images/three31.png" alt="" />
              </div>
              <div class="rightInfo">
                <div class="r-title">
                  累计举办活动次数
                </div>
                <div class="r-num">{{ ActivityCount.activityCount }}</div>
              </div>
            </el-card>
            <el-card class="datas-item">
              <div class="leftHead">
                <img src="../images/three32.png" alt="" />
              </div>
              <div class="rightInfo">
                <div class="r-title">
                  累计参与活动人数
                </div>
                <div class="r-num">{{ ActivityCount.activityPeopleCount }}</div>
              </div>
            </el-card>
            <el-card class="datas-item">
              <div class="leftHead">
                <img src="../images/three33.png" alt="" />
              </div>
              <div class="rightInfo">
                <div class="r-title">
                  累计参与活动人次
                </div>
                <div class="r-num">{{ ActivityCount.activityPersonTimeCount }}</div>
              </div>
            </el-card>
            <div class="flex_start"></div>
            <div class="flex_start"></div>
          </div>
        </div>
        <div style="height:26px"></div>
        <div class="resource_one">
          <div class="resource_one_title">答题</div>
          <div class="resource_one_info">
            <el-card class="datas-item">
              <div class="leftHead">
                <img src="../images/three41.png" alt="" />
              </div>
              <div class="rightInfo">
                <div class="r-title">
                  题目总数
                </div>
                <div class="r-num">{{ RushCount.questionCount }}</div>
              </div>
            </el-card>
            <el-card class="datas-item">
              <div class="leftHead">
                <img src="../images/three42.png" alt="" />
              </div>
              <div class="rightInfo">
                <div class="r-title">
                  累计发布闯关次数
                </div>
                <div class="r-num">{{ RushCount.publishCount }}</div>
              </div>
            </el-card>
            <el-card class="datas-item">
              <div class="leftHead">
                <img src="../images/three43.png" alt="" />
              </div>
              <div class="rightInfo">
                <div class="r-title">
                  累计答题总人数
                </div>
                <div class="r-num">{{ RushCount.answerPeopleCount }}</div>
              </div>
            </el-card>
            <el-card class="datas-item">
              <div class="leftHead">
                <img src="../images/three44.png" alt="" />
              </div>
              <div class="rightInfo">
                <div class="r-title">
                  累计答题总人次
                </div>
                <div class="r-num">{{ RushCount.answerPersonTimeCount }}</div>
              </div>
            </el-card>
            <div class="flex_start"></div>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import {
  queryUserInfoCount,
  queryVideoCount,
  queryAudioCount,
  queryActivityCount,
  queryRushCount,
  queryUserAgeCount,
  queryNewUserCount,
  querySystemCount
} from '../api.js'
export default {
  name: 'HomePage',
  data() {
    return {
      data: [
        { name: 'XSS跨站', value: 259, block: 1, monitor: 258 },
        { name: '频率限制', value: 197, block: 181, monitor: 16 },
        { name: 'SQL注入', value: 193, block: 48, monitor: 145 },
        { name: 'CSRF', value: 54, block: 53, monitor: 1 },
        { name: '恶意广告检测', value: 18, block: 0, monitor: 18 },
        { name: '其他防护', value: 49, block: 0, monitor: 0 }
      ],
      SystemCount: {},
      UserInfo: {},
      VideoCount: {},
      AudioCount: {},
      ActivityCount: {},
      RushCount: {},
      UserAgeCount: [],
      NewUserCountX: [],
      NewUserCountY: []
    }
  },
  created() {
    this.dataInits()
  },
  mounted() {},
  methods: {
    async dataInits() {
      const loading = this.$loading({
        lock: true,
        text: '加载中，请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      try {
        const {
          data: { data: SystemCount }
        } = await querySystemCount()
        const {
          data: { data: UserInfo }
        } = await queryUserInfoCount()
        const {
          data: { data: VideoCount }
        } = await queryVideoCount()
        const {
          data: { data: AudioCount }
        } = await queryAudioCount()
        const {
          data: { data: ActivityCount }
        } = await queryActivityCount()
        const {
          data: { data: RushCount }
        } = await queryRushCount()
        const {
          data: { data: UserAgeCount }
        } = await queryUserAgeCount()
        const {
          data: { data: NewUserCount }
        } = await queryNewUserCount()
        this.SystemCount = SystemCount
        this.UserInfo = UserInfo
        this.VideoCount = VideoCount
        this.AudioCount = AudioCount
        this.ActivityCount = ActivityCount
        this.RushCount = RushCount
        // this.UserAgeCount = UserAgeCount
        for (const key in UserAgeCount) {
          this.UserAgeCount.push({
            name: key,
            value: UserAgeCount[key].count,
            monitor: UserAgeCount[key].percentage
          })
        }
        for (const key in NewUserCount) {
          this.NewUserCountX.push(key)
          this.NewUserCountY.push(NewUserCount[key])
        }
        this.$nextTick(() => {
          this.init()
          this.inits()
        })
        loading.close()
      } catch {
        loading.close()
      }
    },
    init() {
      const EchartsDom = document.getElementById('user_echarts_left')
      const myChart = echarts.init(EchartsDom)
      const option = {
        // 环形图中间默认显示文字
        title: {
          text: `{a|年龄分布}`,
          top: 'bottom',
          left: -100,
          textStyle: {
            rich: {
              a: {
                fontSize: 22,
                padding: [0, 0, 0, 190],
                color: 'rgba(0,0,0,0.65)'
              },
              b: {
                fontSize: 26,
                padding: [0, 0, 0, 210],
                color: 'rgba(0,0,0,0.85)'
              }
            }
          }
        },
        tooltip: {
          backgroundColor: '#fff',
          extraCssText: 'box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);',
          padding: [12, 16, 12, 16],
          textStyle: {
            color: 'rgba(0,0,0,0.65)'
          },
          // 悬浮的位置可以调整，总距离左边10px
          position: (point) => {
            return ['10', point[1]]
          },
          formatter: (param) => {
            const { name, value } = param
            const result = `<div>${name}:${value} 人</div>`
            return result
          }
        },
        legend: {
          orient: 'vertial',
          height: '100%',
          itemWidth: 16,
          itemHeight: 16,
          itemGap: 40,
          right: 0,
          top: '0%',
          borderRadius: 15,
          data: this.UserAgeCount,
          textStyle: {
            color: 'rgba(0,0,0,0.65)'
          },
          formatter: (name) => {
            const value = this.UserAgeCount.find((item) => item.name === name).monitor
            return `${name}：${value}`
          }
        },
        color: [
          '#4168FF',
          '#47CBFF',
          '#FF7A33',
          '#45DE7F',
          '#FFAC34',
          '#5AD7D8',
          '#8163E9',
          '#FF5F45',
          '#01C581',
          '#B754F6',
          '#FCDA0F',
          '#9B501B',
          '#A0D911',
          '#2998FF',
          '#938BF8'
        ],
        series: [
          {
            name: '攻击总数',
            type: 'pie',
            radius: ['70%', '40%'],
            center: ['30%', '50%'], // 图形位置
            label: {
              // 鼠标悬浮具体数据显示
              show: false
            },
            data: this.UserAgeCount
          }
        ]
      }
      option && myChart.setOption(option)
    },
    inits() {
      const EchartsDom = document.getElementById('user_echarts_right')
      const myChart = echarts.init(EchartsDom)
      const option = {
        grid: {
          top: '10%',
          left: '5%',
          right: '5%',
          bottom: '10%'
        },
        title: {
          text: `新增用户数`,
          top: 'top',
          left: 0
          // textStyle: {
          //   rich: {
          //     a: {
          //       fontSize: 22,
          //       padding: [0, 0, 0, 190],
          //       color: 'rgba(0,0,0,0.65)'
          //     },
          //     b: {
          //       fontSize: 26,
          //       padding: [0, 0, 0, 210],
          //       color: 'rgba(0,0,0,0.85)'
          //     }
          //   }
          // }
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          spiltLine: {
            show: true // 想要不显示网格线，改为false
          },
          type: 'category',
          axisLine: {
            show: true
          },
          splitArea: {
            // show: true,
            color: '#f00',
            lineStyle: {
              color: '#f00'
            }
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            margin: 10
          },
          boundaryGap: false,
          data: this.NewUserCountX
        },
        yAxis: {
          type: 'value',
          spiltLine: {
            show: true // 想要不显示网格线，改为false
          }
        },
        series: [
          {
            data: this.NewUserCountY,
            type: 'line',
            smooth: true,
            lineStyle: {
              normal: {
                color: '#e44d42'
              }
            },
            itemStyle: {
              color: '#e44d42',
              borderWidth: 1,
              borderColor: '#e44d42'
            }
          }
        ]
      }
      option && myChart.setOption(option)
    }
  }
}
</script>
<style lang="scss" type="text/scss">
@import '@/styles/mixin.scss';

.homePage {
  position: relative;
  width: 100%;
  height: calc(100vh - 60px);
  padding: 20px;
  padding-bottom: 67px;

  .scrollbar-con {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .el-scrollbar__wrap {
      box-sizing: border-box;
      overflow-x: hidden !important;
      margin-right: 0 !important;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .total_of {
      height: 268px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 27px;
      background: #ffffff;
      padding: 28px 36px 37px;
      border-radius: 10px;
      .datas-item {
        width: 339px;
        height: 204px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        background: #f4fafe;
        .el-card__body {
          padding: 0;
          padding-left: 17px;
          width: 100%;
          display: flex !important;
          .leftHead {
            width: 73px;
            .icon {
              width: 100%;
            }
          }
          .rightInfo {
            display: flex;
            justify-content: space-around;
            flex-direction: column;
            margin-left: 17px;
            .r-title {
              font-size: 25.33px;
              font-family: PingFang SC, PingFang SC-Regular;
              font-weight: 400;
              text-align: left;
              color: #828796;
            }

            .r-num {
              font-size: 42.67px;
              font-family: DINPro, DINPro-Medium;
              font-weight: bold;
              text-align: left;
              color: #333333;
            }
          }
        }
      }
    }

    .user_statistics {
      height: 613px;
      width: 100%;
      background: #ffffff;
      padding: 25px 0;
      border: 1.25px solid #e9e9e9;
      border-radius: 10.67px;
      box-shadow: -1.33px 0px 28px 1.33px rgba(38, 46, 45, 0.06);
      margin-bottom: 27px;
      .user_top {
        display: flex;
        align-items: center;
        margin-bottom: 25px;
        .icon {
          width: 16px;
          height: 32px;
          background: #e44d42;
          border-radius: 0 32px 32px 0;
          margin-right: 16px;
        }
        .text {
          font-size: 24px;
          font-family: PingFang SC, PingFang SC-Semibold;
          font-weight: 600;
          text-align: left;
          color: #0a1a3f;
          line-height: 40px;
        }
      }
      .user_info {
        width: 100%;
        height: 126px;
        display: flex;
        justify-content: space-between;
        padding: 0 27px;
        margin-bottom: 31px;
        .datas-item {
          width: 286px;
          height: 126px;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          background: #fafafa;
          border-radius: 10px;
          .el-card__body {
            padding: 0;
            padding-left: 21px;
            width: 100%;
            display: flex !important;
            .leftHead {
              width: 53px;
              img {
                width: 100%;
              }
            }
            .rightInfo {
              display: flex;
              justify-content: space-around;
              flex-direction: column;
              margin-left: 17px;
              .r-title {
                font-size: 22.67px;
                font-family: Microsoft YaHei, Microsoft YaHei-Regular;
                font-weight: 400;
                text-align: left;
                color: #666666;
                line-height: 12px;
              }

              .r-num {
                font-size: 32px;
                font-family: DINPro, DINPro-Bold;
                font-weight: 700;
                text-align: left;
                color: #333333;
                line-height: 12px;
              }
            }
          }
        }
      }
      .user_echarts {
        width: 100%;
        padding: 0 26px;
        display: flex;
        .user_echarts_left {
          width: 460px;
          height: 320px;
          margin-right: 53px;
        }
        .user_echarts_right {
          flex: 1;
        }
      }
    }
    .resource_statistics {
      width: 100%;
      height: 888px;
      background: #ffffff;
      border: 1px solid #e9e9e9;
      border-radius: 10px;
      padding: 25px 0;
      box-shadow: -1.33px 0px 28px 1.33px rgba(38, 46, 45, 0.06);

      .resource_top {
        display: flex;
        align-items: center;
        margin-bottom: 25px;
        .icon {
          width: 16px;
          height: 32px;
          background: #e44d42;
          border-radius: 0 32px 32px 0;
          margin-right: 16px;
        }
        .text {
          font-size: 24px;
          font-family: PingFang SC, PingFang SC-Semibold;
          font-weight: 600;
          text-align: left;
          color: #0a1a3f;
          line-height: 40px;
        }
      }
      .resource_one {
        padding-left: 26px;
        padding-right: 26px;
        .resource_one_title {
          font-size: 24px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          text-align: left;
          color: #0a1a3f;
          margin-bottom: 22px;
        }
        .flex_start {
          width: 286px;
          height: 126px;
        }
        .resource_one_info {
          display: flex;
          justify-content: space-between;
          .datas-item {
            width: 286px;
            height: 126px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            background: #fafafa;
            border-radius: 10px;
            .el-card__body {
              padding: 0;
              padding-left: 21px;
              width: 100%;
              display: flex !important;
              .leftHead {
                width: 53px;
                height: 53px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .rightInfo {
                display: flex;
                justify-content: space-around;
                flex-direction: column;
                margin-left: 17px;
                .r-title {
                  font-size: 18px;
                  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
                  font-weight: 400;
                  text-align: left;
                  color: #666666;
                  line-height: 12px;
                }

                .r-num {
                  font-size: 32px;
                  font-family: DINPro, DINPro-Bold;
                  font-weight: 700;
                  text-align: left;
                  color: #333333;
                  line-height: 12px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
